<template>
	<view class="s-count_down" :class="inline ? 's-count_down_flex' : ''">
		<template v-if="isToStart">
			<!-- 待开始展示文本 -->
			<slot name="todo">
				<view class="s-count_label s-count_label_todo" :style="[innerTextStyle]" v-if="showLabel">
					<s-icon name="clock" size="30" />
					<text>距开始</text>
				</view>
			</slot>
		</template>
		<template v-if="isDoing">
			<!-- 进行中展示文本 -->
			<slot name="doing">
				<view class="s-count_label s-count_label_doing" :style="[innerTextStyle]" v-if="showLabel">
					<s-icon name="clock" size="30" />
					<text>距结束</text>
				</view>
			</slot>
		</template>
		<template v-if="isEnd">
			<!-- 已结束展示文本 -->
			<slot name="done">
				<view class="s-count_label s-count_label_done" :style="[innerTextStyle]" v-if="showLabel">
					<s-icon name="clock" size="30" />
					<text>已结束</text>
				</view>
			</slot>
		</template>

		<view class="s-count_box" v-if="!isEnd">
			<block v-for="(li,i) in [
				{showday:showDays,title:day,txt:'天'},
				{showday:true,title:hour,txt:'时'},
				{showday:true,title:min,txt:'分'},
				{showday:true,title:second,txt:'秒'}
			]">
				<view class="s-count_box_li" v-if="li.showday">
					<view class="s-count_box_li_txt" :style="[innerNumberStyle]">{{ li.title }}</view>
					<view class="s-count_box_li_dot" :style="[innerUnitStyle]">{{ isColon ? (i==3?'':':') : li.txt }}</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
/**
 * 倒计时
 * <br>传入开始时间和结束时间即可，时间格式支持时间戳和日期格式的字符串
 * <br>可根据时间显示 状态文字
 */
export default {
	name: 's-count-down',
	props: {
		// 开始时间,支持时间戳和日期格式的字符串
		startTime: { type: [String, Number], default: '' },
		// 结束时间,支持时间戳和日期格式的字符串
		endTime: { type: [String, Number], default: '' },
		// 显示天数
		showDay: { type: Boolean, default: false },
		// 分隔符 colon为英文冒号，zh为中文
		unit: { type: String, default: 'colon' },
		// 显示内部状态说明文字
		showLabel: { type: Boolean, default: true },
		// 是否文本和倒计时区域在一行展示
		inline: { type: Boolean, default: true },
		// 将作为内部文字相关颜色
		color: { type: String, default: '#DB201E' },
		// 将作为内部背景/边框颜色
		bgColor: { type: String, default: '' },
		// 分隔符颜色
		unitColor: { type: String, default: '#DB201E' },

		// 数字样式
		numberStyle: {
			type: Object,
			default: () => {
				return {};
			}
		},
		// 单位样式
		unitStyle: {
			type: Object,
			default: () => {
				return {};
			}
		},
		// 文本说明样式
		textStyle: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},

	data() {
		return {
			// 当前时间
			now: new Date().getTime(),
			showDays: this.showDay,
		};
	},

	computed: {
		startTimeStamp() {
			let date = this.startTime;
			// 如果是日期格式
			if (isNaN(Number(date))) {
				date = new Date(date.replace(/-/g, '/')).getTime();
			}
			// 如果是时间戳
			else {
				if (this.date < 10000000000) {
					// 秒数级时间戳转成毫秒级
					date = new Date(parseFloat(date) * 1000).getTime();
				} else {
					date = new Date(parseFloat(date)).getTime();
				}
			}
			return date;
		},

		endTimeStamp() {
			let date = this.endTime;
			// 如果是日期格式
			if (isNaN(Number(date))) {
				// 将日期分隔符 - 转成 /  (ios兼容)
				date = new Date(date.replace(/-/g, '/')).getTime();
			}
			// 如果是时间戳
			else {
				if (this.date < 10000000000) {
					// 秒数级时间戳转成毫秒级
					date = new Date(parseFloat(date) * 1000).getTime();
				} else {
					date = new Date(parseFloat(date)).getTime();
				}
			}
			return date;
		},

		day() {
			let now = this.now;
			let gap = 0;
			if (this.isToStart) {
				gap = this.startTimeStamp - this.now;
			} else if (this.isDoing) {
				gap = this.endTimeStamp - this.now;
			}
			return this.getZeroPrefix(parseInt(gap / 1000 / 60 / 60 / 24));
		},

		hour() {
			let now = this.now;

			let gap = 0;
			if (this.isToStart) {
				gap = this.startTimeStamp - this.now;
			} else if (this.isDoing) {
				gap = this.endTimeStamp - this.now;
			}

			let res = parseInt(gap / 1000 / 60 / 60);
			return this.showDays ? this.getZeroPrefix(res % 24) : this.getZeroPrefix(res);
		},

		min() {
			let now = this.now;

			let gap = 0;
			if (this.isToStart) {
				gap = this.startTimeStamp - this.now;
			} else if (this.isDoing) {
				gap = this.endTimeStamp - this.now;
			}
			return this.getZeroPrefix(parseInt((gap / 1000 / 60) % 60));
		},

		second() {
			let now = this.now;

			let gap = 0;
			if (this.isToStart) {
				gap = this.startTimeStamp - this.now;
			} else if (this.isDoing) {
				gap = this.endTimeStamp - this.now;
			}
			return this.getZeroPrefix(parseInt((gap / 1000) % 60));
		},

		// 是否是待开始
		isToStart() {
			let now = this.now;
			return this.now < this.startTimeStamp;
		},

		// 是否正在进行
		isDoing() {
			return this.now >= this.startTimeStamp && this.now <= this.endTimeStamp;
		},

		// 是否已结束
		isEnd() {
			let now = this.now;
			return this.now > this.endTimeStamp;
		},

		// 是否是逗号
		isColon() {
			return this.unit == 'colon';
		},

		innerNumberStyle() {
			let style = {
				background: this.bgColor,
				// 'border': `1px solid ${this.bgColor}`,
				'border-radius': '10rpx',
				padding: '4rpx',
				color: this.color,
				...this.numberStyle
			};
			return style;
		},

		innerUnitStyle() {
			let style = {
				color: this.unitColor,
				margin: '0 4rpx',
				...this.unitStyle
			};
			return style;
		},

		innerTextStyle() {
			let style = {
				color: this.bgColor,
				...this.textStyle
			};
			return style;
		}
	},

	watch: {
		day: {
			handler(val) {
				// 如果天数为0则不显示
				if (!val) {
					this.showDays = false;
				}
			}
		},

		isToStart: {
			handler(val) {
				console.log('触发开始', val);
				if (!val) {
					console.log('触发开始', val);
					this.$nextTick(() => {
						// 到达开始时间时触发
						this.$emit('start');
					});
				}
			}
		},

		isEnd: {
			handler(val) {
				if (val) {
					this.$nextTick(() => {
						// 倒计时结束触发
						this.$emit('end');
					});
				}
			}
		}
	},

	created() {
		// console.log("开始时间", this.startTimeStamp)
		// console.log("结束时间", this.endTimeStamp)
		this.getTime();
	},

	methods: {
		// 获取当前时间戳
		getTime() {
			setInterval(() => {
				this.now = new Date().getTime();
			}, 1000);
		},
		getZeroPrefix(num) {
			return num < 10 ? '0' + num : num;
		}
	}
};
</script>

<style lang="scss" scoped>
.s-count{
	&_down {
		font-size: 28rpx;
		line-height: 1;
		&_flex {
			display: flex;
			align-items: center;
		}
	}
	&_box {
		display: flex;
		&_li {
			display: flex;
			align-items: center;
			&_txt {
				box-sizing: border-box;
			}
			&_dot {}
		}
	}
	&_label {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		&_todo {
			color: #db201e;
		}
		&_doing {
			color: #db201e;
		}
		&_done {
			color: #999;
		}
	}
}
</style>
